<template>
  <layout>
    <template #moduleContent>
      <div class="dashboard-handoff left" v-if="!isUltraWide">
        <handoff v-for="item in QuanchengModule.left" :key="item.id" :list="item" type="left" :id="item.id" />
      </div>
      <div class="dashboard-handoff right" v-if="!isUltraWide">
        <handoff v-for="item in QuanchengModule.right" :key="item.id" :list="item" type="right" :id="item.id" />
      </div>
      <home-button />
      <big v-if="isUltraWide"></big>
      <mid v-else></mid>
    </template>
  </layout>
</template>

<script setup lang="ts">
import layout from '@/gasLayout/index.vue';
import { useIsUltraWideScreen } from '@/hooks/useIsUltraWideScreen';
import { QuanchengModule } from '@/constants/components/cards';
import { useLayoutStore } from '@/store/modules/layout';
import big from './big/index.vue';
import mid from './mid/index.vue';
import homeButton from '@/components/homeButton/index.vue';

const { isUltraWide } = useIsUltraWideScreen();
const layoutStore = useLayoutStore();
onMounted(() => {
  layoutStore.resetData();
  // 初始化左右两边
  layoutStore.initModuleData(QuanchengModule.left[0], true, false);
  // 或者只初始化右边
  layoutStore.initModuleData(QuanchengModule.right[0], false, true);
});
</script>

<style lang="scss" scoped>
.dialog-container {
  position: absolute;
  top: 15%;
  left: 30%;
  z-index: 5;
}

.dashboard-handoff {
  z-index: 4;
  position: absolute;
  top: 1%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  &.left {
    left: 3%;
  }

  &.right {
    right: 3%;
  }
}

.ToggleMapMode-box {
  position: absolute;
  right: 26.7%;
  bottom: 15%;
  z-index: 4;
}

@media (min-width: 3840px) {
  .ToggleMapMode-box {
    right: 25.9% !important;
  }
}
</style>
